<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <style>html,body{height:100%;margin:0;}</style>
  <script src="../tailwindcss-jit-cdn-ex.min.js"></script>
  <style>
    @keyframes up-down {
      0%   { width:200px; height:50px }
      100% { width:400px; height:80px }
    }
    .play-animate { animation: up-down 2s alternate infinite; }
  </style>
</head>

<body>
  <div id="app" class="font-mono"
    @vue:mounted="mounted"
    v-resize:document="domSize=[$v.width, $v.height]">
    <div class="fixed bg-white">{{inView}}</div>
    <div class="play-animate translate-x-12 border-red-500 border p-2" v-resize="elemSize=[Math.round($v.width), Math.round($v.height)]">{{elemSize}}</div>
    <div v-ref="info" v-intersect="inView=$v.intersect;trace($v)" class="w-[fit-content] p-4 mt-2 translate-x-12 border">{{domSize}}</div>
    <div class="w-[fit-content] p-4 h-[102dvh] bg-gray-200"></div>
  </div>

  <script type="module">
    import { createApp } from '../petite-vue.es.js';
    import * as directives from '../dist/petite-vue-directives.es.js?v=0.4.0';
    const { vRef, vResize, vIntersect } = directives;

    createApp({
      inView: true,
      domSize: [0, 0],
      elemSize: [0, 0],
      trace(detail) {
        console.log('trace',detail);
      },
      async mounted() {
        console.log(this.$refs);
      }
    })
    .directive('intersect', vIntersect)
    .directive('resize', vResize)
    .directive('ref', vRef)
    .mount('#app');
  </script>
</body>
</html>